<template>
	<view class="container container26584">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex7-clz">
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz"> </view>
			<!--  #endif -->
			<image src="https://demo.kuqixiu.com/tuniao/static/logo.jpg" class="image3-size diygw-image diygw-col-0 image3-clz" mode="widthFix"></image>
			<view class="diygw-col-0 text1-clz"> 图鸟东东 </view>
			<view class="flex diygw-col-24 justify-around flex-wrap flex9-clz">
				<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex10-clz">
					<view class="diygw-col-0 text-clz diygw-text-lg"> 168 </view>
					<view class="diygw-col-0"> 他的关注 </view>
				</view>
				<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex19-clz">
					<view class="diygw-col-0 text20-clz diygw-text-lg"> 12822 </view>
					<view class="diygw-col-0"> 粉丝 </view>
				</view>
				<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex17-clz">
					<view class="diygw-col-0 text17-clz diygw-text-lg"> 218 </view>
					<view class="diygw-col-0"> 动态 </view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 justify-between items-center flex-clz">
			<view class="flex flex-wrap diygw-col-0 flex-direction-column">
				<image src="https://demo.kuqixiu.com/tuniao/static/fz1.png" class="image4-size diygw-image diygw-col-24" mode="widthFix"></image>
				<view class="diygw-col-0 text10-clz"> 开通会员，每月立省199元 </view>
			</view>
			<view class="diygw-col-0 text5-clz"> 立即开通 </view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
			<view class="diygw-col-0 text3-clz"> 我的订单 </view>
			<view class="flex flex-wrap diygw-col-24 justify-around flex35-clz">
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz7.png" class="image16-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text39-clz"> 全部订单 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz8.png" class="image18-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text41-clz"> 待付款 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz9.png" class="image20-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text43-clz"> 待发货 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz10.png" class="image-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text6-clz"> 待评价 </view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz">
			<view class="diygw-col-0 text2-clz"> 特色服务 </view>
			<view class="flex flex-wrap diygw-col-24 justify-start flex5-clz">
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex6-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz2.png" class="image1-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text4-clz"> 礼券卡包 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex11-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/ym-1.png" class="image2-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text7-clz"> 收货地址 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex12-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz21.png" class="image5-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text9-clz"> 积分商城 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex13-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz22.png" class="image6-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text11-clz"> 邀请有礼 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex18-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz23.png" class="image10-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text15-clz"> 精彩活动 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex16-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz24.png" class="image9-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text14-clz"> 游戏中心 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex15-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz25.png" class="image8-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text13-clz"> 常见问题 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex14-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz26.png" class="image7-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text12-clz"> 意见建议 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex21-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz27.png" class="image12-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text18-clz"> 联系我们 </view>
				</view>
				<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex20-clz">
					<image src="https://demo.kuqixiu.com/tuniao/static/fz28.png" class="image11-size diygw-image diygw-col-0" mode="aspectFit"></image>
					<view class="diygw-col-0 text16-clz"> 设置中心 </view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom bar-clz">
			<view class="diygw-grid diygw-actions">
				<button @tap="navigateTo" data-type="page" data-url="/pages/index" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar radius diy-icon-home" style="font-size: 44rpx"> </view>
						<view class="diygw-grid-title"> 首页 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/product" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar radius diy-icon-goods" style="font-size: 44rpx"> </view>
						<view class="diygw-grid-title"> 产品 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/case" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar radius diy-icon-discover" style="font-size: 44rpx"> </view>
						<view class="diygw-grid-title"> 案例 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/news" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar radius diy-icon-newshot" style="font-size: 44rpx"> </view>
						<view class="diygw-grid-title"> 资讯 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/me" class="diygw-action" style="color: #001ffe !important">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar radius diy-icon-emoji" style="font-size: 44rpx; color: #001ffe"> </view>
						<view class="diygw-grid-title"> 我的 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { logintype: '0', agree: '0' }
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			// 同意或不同意 自定义方法
			async agreeFunction(param) {
				let thiz = this;
				//如果不同意，改为同意
				this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
			},

			// 验证码登录或密码登录 自定义方法
			async codeFunction(param) {
				let thiz = this;
				//如果1表示验证码登录，0表进密码登录
				this.globalData.logintype = this.globalData.logintype == '1' ? '0' : '1';
			},

			// 发送短信验证码 自定义方法
			async sendMsgFunction(param) {
				let thiz = this;
				this.formData.codeFlag = false;
				if (!this.form.phone) {
					this.showToast('手机号码不能为空');
					//不给发送验证码
					this.formData.codeFlag = false;
					return;
				}
				let pattern = /^1[3-9]\d{9}$/;
				if (!pattern.test(this.form.phone)) {
					this.showToast('手机号码输入有误');
					//不给发送验证码
					this.formData.codeFlag = false;
					return;
				}
				let http_url = '';
				//配置后可删除下面的判断
				if (!http_url) {
					this.showToast('默认发送短信验证地址，配置后可删除此判断');
					return;
				}
				let http_data = {
					phone: this.form.phone
				};
				let http_header = {};
				let data = await this.$http.post(http_url, http_data, http_header, 'json');
				if (data.code == 0) {
					this.showToast(data.msg);
					return;
				} else {
					//修改为true
					this.formData.codeFlag = true;
					this.$refs.codeCodeRef.start();
					this.showToast('验证码已发送');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex7-clz {
		padding-top: 20rpx;
		background-size: 100% 100%;
		padding-left: 10rpx;
		padding-bottom: 20rpx;
		background-position: bottom center;
		padding-right: 10rpx;
	}
	.flex8-clz {
		height: 120rpx;
	}
	.image3-clz {
		flex-shrink: 0;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		width: 120rpx !important;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		height: 120rpx !important;
	}
	.image3-size {
		height: 120rpx !important;
		width: 120rpx !important;
	}
	.text1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		font-weight: bold;
		padding-left: 20rpx;
		font-size: 32rpx !important;
		padding-bottom: 10rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 20rpx;
	}
	.flex9-clz {
		padding-top: 10rpx;
		z-index: 100;
		color: #707070;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex10-clz {
		z-index: 100;
	}
	.text-clz {
		color: #474747;
	}
	.flex19-clz {
		z-index: 100;
	}
	.text20-clz {
		color: #474747;
	}
	.flex17-clz {
		z-index: 100;
	}
	.text17-clz {
		color: #474747;
	}
	.flex-clz {
		padding-top: 30rpx;
		border-bottom-left-radius: 16rpx;
		background-size: 100% 100%;
		padding-left: 20rpx;
		padding-bottom: 30rpx;
		border-top-right-radius: 16rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.2);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 16rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 16rpx;
		background-image: url(https://demo.kuqixiu.com/tuniao/static/hb11.png);
		margin-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.image4-size {
		height: 42rpx !important;
		width: 108rpx !important;
	}
	.text10-clz {
		margin-left: 0rpx;
		color: #eecc92;
		margin-top: 10rpx;
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}
	.text5-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 100rpx;
		color: #ffffff;
		font-weight: bold;
		padding-left: 24rpx;
		font-size: 32rpx !important;
		padding-bottom: 10rpx;
		border-top-right-radius: 100rpx;
		background-color: rgba(255, 255, 255, 0.3);
		overflow: hidden;
		border-top-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
		padding-right: 24rpx;
	}
	.flex4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 16rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 16rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		box-shadow: 0rpx 16rpx 50rpx rgba(235, 230, 230, 0.44);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 16rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 16rpx;
		margin-bottom: 20rpx;
		padding-right: 10rpx;
	}
	.text3-clz {
		margin-left: 10rpx;
		font-weight: bold;
		flex: 1;
		font-size: 28rpx !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.flex35-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}
	.image16-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text39-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image18-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text41-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image20-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text43-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text6-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 16rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 16rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		box-shadow: 0rpx 16rpx 50rpx rgba(235, 230, 230, 0.44);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 16rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 16rpx;
		margin-bottom: 20rpx;
		padding-right: 10rpx;
	}
	.text2-clz {
		margin-left: 10rpx;
		font-weight: bold;
		flex: 1;
		font-size: 28rpx !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.flex5-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}
	.flex6-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image1-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text4-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex11-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image2-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text7-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex12-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image5-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text9-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex13-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image6-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text11-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex18-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image10-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text15-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex16-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image9-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text14-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex15-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image8-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text13-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex14-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image7-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text12-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex21-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image12-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text18-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex20-clz {
		margin-left: 10rpx;
		width: calc(25% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image11-size {
		height: 48rpx !important;
		width: 48rpx !important;
	}
	.text16-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.container26584 {
		padding-left: 0px;
		padding-right: 0px;

		background-image: url(https://demo.kuqixiu.com/tuniao/static/bg1.png);
		background-position: top center;
		background-size: cover;
	}
	.container26584 {
		padding-bottom: 80px;
	}
</style>
